<template>
    <div id="rBar2">
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: "echarts",
    data: function () {
        return {

        }
    },
    mounted: function () {
        this.echartsInit();
    },
    methods: {
        echartsInit() {
            echarts.init(document.getElementById('rBar2')).setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['2022.10.14', '', '', '2022.10.17', '', '', '2022.10.20'],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: [
                    {
                        data: [15, 23, 22, 18, 13, 14, 6],
                        type: 'line'
                    }
                ]
            })
        }
    }
}
</script>

<style scoped lang="less">
#rBar2 {
    width: 330px;
    height: 200px;
    margin-top: -40px;
    z-index: 20;
}
</style>